@font-face {
  font-family: 'WeChatNum';
  src: url('./fonts/WeChatNum.ttf');
}
@font-face {
  font-family: 'SF Pro';
  src: url('./fonts/sf-pro-text_medium.dcc28d6a.woff2');
}

/* flex */
.flex {
  &-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*
      主轴的对齐方式
      ┌──────────────────┐
      |    ▇ ▇ ▇ ▇    |
      └──────────────────┘
    */
    align-items: center;

    /*
      交叉轴的对齐方式
      ┌──────────────────┐
      |    ▇ ■ - █ -    |
      └──────────────────┘
    */
    &.hide {
      display: none;
    }

    & > .flex-auto {
      width: 1px;
      overflow: auto;
    }
  }

  &-item {
    flex: 1;
  }

  &-inline {
    display: inline-flex;
  }

  &-column {
    flex-direction: column;

    & > * {
      width: 100%;
    }

    & > .flex-auto {
      width: 100%;
      // height: 1px;
      overflow: auto;
    }
  }

  &-start {
    justify-content: flex-start;
  }

  &-top {
    align-items: flex-start;
  }

  &-end {
    justify-content: flex-end;
  }

  &-buttom {
    align-items: flex-end;
  }

  &-between {
    justify-content: space-between;
  }

  &-around {
    justify-content: space-around;
  }

  &-wrap {
    flex-wrap: wrap;
  }
}
///////////////////////////////////////

.w-100{
  width: 100%;
}